﻿@model SlideshowListModel
@using Telerik.Web.Mvc.UI
@{
    //page title
    ViewBag.Title = @T("Admin.Media.Slideshow.ListSlideshows").Text;
}
@using (Html.BeginForm())
{
    <div class="section-header">
        <div class="title">
            <img src="@Url.Content("~/subsites/Administration/Content/images/ico-catalog.png")" />
            @T("Admin.Media.Slideshow.ListSlideshows")
        </div>
        <div class="options">
            <a href="@Url.Action("CreateSlideshow")" class="t-button">@T("Admin.Media.Slideshow.CreateSlideshow")</a>
            <a href="@Url.Action("CreatePictureLinkCollection")" class="t-button">@T("Admin.Media.PictureLink.Collection.CreatePictureLinkCollection")</a>
            <a href="@Url.Action("ExportXml")" class="t-button">@T("Admin.Common.ExportToXml")</a>
        </div>
    </div>

    @Html.ValidationSummary(false)

    @Html.Telerik().TabStrip().Name("slideshow.picturelist").Items(x =>
{
    var tabListSlideshows = x.Add().Text(T("Admin.Media.Slideshow.ListSlideshows").Text).Content(TabListSlideshows().ToHtmlString());
    var tabListPictureLinkCollections = x.Add().Text(T("Admin.Media.PictureLink.Collection.ListPictureLinkCollections").Text).Content(TabListPictureLinkCollections().ToHtmlString());
    var tabListPictureLinks = x.Add().Text(T("Admin.Media.PictureLink.ListPictureLinks").Text).Content(TabListPictureLinks().ToHtmlString());

    var selectedTab = (string)ViewData["selectedTab"];
    switch (selectedTab)
    {
        case "listslideshows":
            tabListSlideshows.Selected(true);
            break;
        case "listpicturelinkcollections":
            tabListPictureLinkCollections.Selected(true);
            break;
        case "listpicturelinks":
            tabListPictureLinks.Selected(true);
            break;
        default:
            tabListSlideshows.Selected(true);
            break;
    }

    //generate an event
    EngineContext.Current.Resolve<IEventPublisher>().Publish(new AdminTabStripCreated(x, "slideshow.picturelist"));
})
}

@helper TabListSlideshows()
{
    var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSize;

    <table width="100%" class="adminContent">
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.SearchStoreId):
            </td>
            <td class="adminData">
                @(Html.Telerik().ComboBoxFor(model => model.SearchStoreId)
                        .AutoFill(true)
                        .Filterable()
                        .DataBinding(binding => binding.Ajax().Select("StoreList", "Store", new { storeId = Model.SearchStoreId, customerId = 0 })))
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" id="search-slideshows" class="t-button" value="@T("Admin.Common.Search")" />
            </td>
        </tr>
    </table>
    <p>
    </p>

    <table class="adminContent">
        <tr>
            <td>
                @(Html.Telerik().Grid<SlideshowModel>(Model.Slideshows.Data)
                        .Name("slideshows-grid")
                        .Columns(columns =>
                        {
                            columns.Bound(x => x.Id)
                                .Width(100)
                                .Template(x => x.Id.ToString().ToLower())
                                .Centered();
                            columns.Bound(x => x.Type)
                                .Width(150)
                                .Template(x => x.Type.ToString().ToLower())
                                .Centered();
                            columns.Bound(x => x.Enabled)
                                .Width(50)
                                .Template(x => x.Enabled.ToString().ToLower())
                                .Centered();
                            columns.Bound(x => x.CollectionSystemName)
                                .Width(300)
                                .Centered();
                            columns.Bound(x => x.Id)
                                .Width(50)
                                .Centered()
                                .Template(x => Html.ActionLink(T("Admin.Common.Edit").Text, "EditSlideshow", new { id = x.Id }))
                                .ClientTemplate("<a href=\"EditSlideshow/<#= Id #>\">" + T("Admin.Common.Edit").Text + "</a>")
                                .Title(T("Admin.Common.Edit").Text);
                        })
                        .Pageable(settings => settings.Total(Model.Slideshows.Total).PageSize(gridPageSize).Position(GridPagerPosition.Both))
                        .DataBinding(dataBinding => dataBinding.Ajax().Select("ListSlideshows", "Media"))
                        .ClientEvents(events => events.OnDataBinding("onDataBinding"))
                        .EnableCustomBinding(true))
            </td>
        </tr>
    </table>

    <script type="text/javascript">

        $(document).ready(function () {

            //search button
            $('#search-slideshows').click(function () {
                //search
                var grid = $('#slideshows-grid').data('tGrid');
                grid.currentPage = 1; //new search. Set page size to 1
                grid.ajaxRequest();
                return false;
            });
        });

        function onDataBinding(e) {
            var searchModel = {
                SearchStoreId: $('#SearchStoreId').val()
            };
            e.data = searchModel;
        }

    </script>
}
@helper TabListPictureLinkCollections()
{
    var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSize;

    <table class="adminContent">
        <tr>
            <td>
                @(Html.Telerik().Grid<PictureLinkCollectionModel>()
                    .Name("picturelinkcollections-grid")
                    .Columns(columns =>
                    {
                        columns.Bound(x => x.SystemName).Width(300);
                        columns.Bound(x => x.PictureDisplayType)
                            .Width(50)
                            .Template(x => x.PictureDisplayType.ToString().ToLower())
                            .Centered();
                        columns.Bound(x => x.RelatedContentCategory)
                            .Width(100)
                            .Centered();
                        columns.Bound(x => x.RelatedContentId)
                            .Width(50)
                            .Template(x => x.RelatedContentId.ToString().ToLower())
                            .Centered();
                        columns.Bound(x => x.Id)
                            .Width(50)
                            .Centered()
                            .Template(x => Html.ActionLink(T("Admin.Common.Edit").Text, "EditPictureLinkCollection", new { id = x.Id }))
                            .ClientTemplate("<a href=\"EditPictureLinkCollection/<#= Id #>\">" + T("Admin.Common.Edit").Text + "</a>")
                            .Title(T("Admin.Common.Edit").Text);
                    })
                    .Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Both))
                    .DataBinding(dataBinding => dataBinding.Ajax().Select("ListPictureLinkCollections", "Media"))
                    .EnableCustomBinding(true)
                    .ClientEvents(x => x.OnError("Grid_onError")))
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        function Grid_onError(e) {
            alert(e.XMLHttpRequest.responseText);
            e.preventDefault();
        }
    </script>
}

@helper TabListPictureLinks()
{
    var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSize;

    <table class="adminContent">
        <tr>
            <td>
                @(Html.Telerik().Grid<PictureLinkModel>()
                    .Name("picturelinks-grid")
                    .Columns(columns =>
                    {
                        columns.Bound(x => x.SystemName).Width(300);
                        columns.Bound(x => x.Visible)
                            .Width(30)
                            .Template(x => x.Visible.ToString().ToLower())
                            .Centered();
                        columns.Bound(x => x.DisplayOrder)
                            .Width(50)
                            .Centered();
                        columns.Bound(x => x.CollectionId)
                            .Width(50)
                            .Template(x => x.CollectionId.ToString().ToLower())
                            .Centered();
                        columns.Bound(x => x.Id)
                            .Width(50)
                            .Centered()
                            .Template(x => Html.ActionLink(T("Admin.Common.Edit").Text, "EditPictureLink", new { id = x.Id }))
                            .ClientTemplate("<a href=\"EditPictureLink/<#= Id #>\">" + T("Admin.Common.Edit").Text + "</a>")
                            .Title(T("Admin.Common.Edit").Text);
                    })
                    .Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Both))
                    .DataBinding(dataBinding => dataBinding.Ajax().Select("ListPictureLinks", "Media"))
                    .EnableCustomBinding(true)
                    .ClientEvents(x => x.OnError("Grid_onError")))
            </td>
        </tr>
    </table>
    <div class="clear">
    </div>
    <p>
        <strong>
            @T("Admin.Media.PictureLink.CreatePictureLink").Text:
        </strong>
    </p>
    <table class="adminContent">
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AddPictureModel.SystemName):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.AddPictureModel.SystemName)
                @Html.ValidationMessageFor(model => model.AddPictureModel.SystemName)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AddPictureModel.DisplayText):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.AddPictureModel.DisplayText)
                @Html.ValidationMessageFor(model => model.AddPictureModel.DisplayText)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AddPictureModel.DisplayOrder):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.AddPictureModel.DisplayOrder)
                @Html.ValidationMessageFor(model => model.AddPictureModel.DisplayOrder)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AddPictureModel.Url):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.AddPictureModel.Url)
                @Html.ValidationMessageFor(model => model.AddPictureModel.Url)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AddPictureModel.Alt):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.AddPictureModel.Alt)
                @Html.ValidationMessageFor(model => model.AddPictureModel.Alt)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AddPictureModel.PictureId)
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.AddPictureModel.PictureId)
                @Html.ValidationMessageFor(model => model.AddPictureModel.PictureId)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AddPictureModel.Visible):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.AddPictureModel.Visible)
                @Html.ValidationMessageFor(model => model.AddPictureModel.Visible)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.AddPictureModel.CollectionId):
            </td>
            <td class="adminData">

                @(Html.Telerik().DropDownListFor(model => model.CollectionId)
                .Name("CollectionId")
                .BindTo(Model.PicturelinkCollections)
                .Placeholder(T("Admin.Media.PictureLink.SelectPictureLinkCollections").Text)
                )

                @Html.ValidationMessageFor(model => model.CollectionId)
            </td>
        </tr>

        <tr>
            <td colspan="2" align="left">
                <input type="button" id="createpicturelink" class="t-button" value="@T("Admin.Media.PictureLink.CreatePictureLink")" />
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#createpicturelink').click(function () {
                var pictureLinkSystemName = $("#@Html.FieldIdFor(model => model.AddPictureModel.SystemName)").val();
                var pictureLinkDisplayText = $("#@Html.FieldIdFor(model => model.AddPictureModel.DisplayText)").val();
                var pictureLinkDisplayOrder = $("#@Html.FieldIdFor(model => model.AddPictureModel.DisplayOrder)").val();
                var pictureLinkUrl = $("#@Html.FieldIdFor(model => model.AddPictureModel.Url)").val();
                var pictureLinkAlt = $("#@Html.FieldIdFor(model => model.AddPictureModel.Alt)").val();
                var pictureLinkPictureId = $("#@Html.FieldIdFor(model => model.AddPictureModel.PictureId)").val();
                var pictureLinkVisible = $("#@Html.FieldIdFor(model => model.AddPictureModel.Visible)").is(':checked');
                var pictureLinkCollectionId = $("#@Html.FieldIdFor(model => model.CollectionId)").val();

                $('#createpicturelink').attr('disabled', true);
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "@(Url.Action("CreatePictureLink", "Media"))",
                    data: {
                        "systemName": pictureLinkSystemName, "displayText": pictureLinkDisplayText, "displayOrder": pictureLinkDisplayOrder,
                        "url": pictureLinkUrl, "alt": pictureLinkAlt, "pictureId": pictureLinkPictureId,
                        "visible": pictureLinkVisible, "collectionId": pictureLinkCollectionId
                    },
                    success: function (data) {
                        if (data.Message == "Success") {
                            var picturelinksGrid = $("#picturelinks-grid");
                            picturelinksGrid.data('tGrid').ajaxRequest();
                            $('#createpicturelink').attr('disabled', false);
                            alert('Successfully to add picture link.');
                        }
                        else {
                            if (data.Message == "Empty") {
                                alert('Url can not be null.');
                            }
                            else if (data.Message == "False") {
                                alert('Failed to add picture link.');
                            }

                            $('#createpicturelink').attr('disabled', false);
                        }

                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('Failed to add picture link.');
                        $('#createpicturelink').attr('disabled', false);
                    }
                });
            });
        });

        function Grid_onError(e) {
            alert(e.XMLHttpRequest.responseText);
            e.preventDefault();
        }
    </script>
}
